<template>
  <div class="normal-data-type">
    <WmcCard :title="'普通数据类型'">
      <template #optbtn>
        <el-button :link="true" type="primary" @click="openDialog">
          添加
        </el-button>
      </template>
      <el-form
        ref="dataTypeForm"
        :model="formData"
        label-width="150px"
        label-position="left"
        id="normalDataType"
      >
        <el-row>
          <template v-for="dataType in formData" v-bind:key="dataType.name">
            <el-col :span="12" class="textarea">
              <el-form-item
                :label="dataType.name"
                v-if="dataType.isNew == false"
                style="width: 100%"
              >
                <el-select
                  v-model="dataType.type"
                  placeholder=""
                  style="width: 100%"
                >
                  <template
                    v-for="(item, index) in dataType.list"
                    v-bind:key="index"
                  >
                    <el-option :label="item" :value="item"></el-option>
                  </template>
                </el-select>
              </el-form-item>
              <el-form-item :label="dataType.name" v-else>
                <el-col :span="18">
                  <el-input
                    v-model="dataType.type"
                    placeholder="请输入内容"
                  ></el-input>
                </el-col>
                <el-col :span="6">
                  <el-button
                    type="primary"
                    plain
                    @click="removeDataType(dataType)"
                    size="default"
                    >删除</el-button
                  >
                </el-col>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </el-form>
    </WmcCard>

    <page-dialog-form
      :title="'添加普通数据类型'"
      width="420px"
      :dialogVisible="dialogVisible"
      :modelConfig="addNormalDataTypeConfig"
      v-model="newFormItem"
      v-if="dialogVisible"
      @close="closeDialog"
      @handleConfirm="handleConfirm"
    ></page-dialog-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch } from 'vue'
import WmcCard from '@/render/base-ui/card'
import PageDialogForm from '@/render/components/page-dialog-form'
import { INormalDataType } from '../types'
import { addNormalDataTypeConfig } from '../config/add-normal-data-type.config'
import { usePageDialogForm } from '@/render/hooks/use-page-dialog-form'
import emitter from '@/render/utils/mitt'

export default defineComponent({
  components: { WmcCard, PageDialogForm },
  props: {
    modelValue: {
      type: Array as PropType<INormalDataType[]>,
      default: () => []
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const formData = ref<INormalDataType[]>(props.modelValue)

    const removeDataType = (dataType: INormalDataType) => {
      const index = formData.value.indexOf(dataType)
      if (index !== -1) {
        formData.value.splice(index, 1)
      }
    }

    const {
      dialogVisible,
      newFormItem,
      openDialog,
      closeDialog,
      handleConfirm
    } = usePageDialogForm(formData.value)

    watch(
      formData,
      (n) => {
        emit('update:modelValue', n)
        emitter.emit('update-tab', 'emitter')
      },
      {
        deep: true
      }
    )

    return {
      formData,
      dialogVisible,
      newFormItem,
      addNormalDataTypeConfig,
      removeDataType,
      openDialog,
      closeDialog,
      handleConfirm
    }
  }
})
</script>

<style scoped lang="less">
.textarea:nth-child(2n + 1) {
  padding-right: 10px;
}
.textarea:nth-child(2n) {
  padding-left: 10px;
}
.el-button {
  float: right;
}
</style>
